import React, { Component } from 'react'
import {HotCateStyled} from './styledComponents'
import { Grid } from 'antd-mobile'
import { getHotCate } from '../../api/home'
import hostlist from 'assets/hotlist.jpg'
export default class HotCate extends Component {
  state={
    data1:[]
  }
  componentDidMount (){
    
    getHotCate()
    .then(res=>{
      const data= res.data.data.list
      this.setState({
        data1 : data
      })
    })
    .catch(err=>{
      console.log(err)
    })
  }
//  data1 = Array.from(new Array(9)).map(() => ({
//     icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
//   }))
  render() {
    
    return (
      <HotCateStyled>
        <header>热门分类</header>
        <Grid data={this.state.data1}
            columnNum={3}
            hasLine={false}
            renderItem={dataItem => (
              <div style={{ padding: '12.5px' }}>
              <img src={hostlist} style={{ width: '75px', height: '75px' }}  />
              <div style={{ color: '#888', fontSize: '14px', marginTop: '12px' }}>
            <span>{dataItem.title}</span>
              </div>
            </div>
          )}
        />
      </HotCateStyled>
    )
  }
}

